<template>
  <el-dialog :title="title" :visible.sync="open" width="80%" :close-on-click-modal="false" class="dia-style">
    <div style="padding: 0 20px 20px 0">
      <div class="dia-form">
        <HkForm
          ref="hkFormRef"
          label-width="140"
          :form-labels="formObj.formLabels"
          :rules="formObj.formRules"
          :data="formData"
          :dict-list="formObj.dictList"
          :btn-hidden="true"
          @handleEvent="handleEvent"
        />
      </div>
    </div>
    <!-- 底部 -->
    <div slot="footer">
      <el-button type="primary" @click="handleSubmit">保 存</el-button>
      <el-button @click="resetForm">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import HkForm from '@/components/Hk-Form'
import { addMetricsBase, getMetrics, editMetricsBase } from '@/api/icp/monitoring'
import _ from 'lodash'

export default {
  components: { HkForm },
  props: {
    title: {
      type: String,
      default: '新增'
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      open: false,
      isShowPrefix: true,
      formData: {
        isDisplay: 1,
        event_level: '3',
        event_category: '1',
        risk_type: '1',
        event_type: ['100', '2'],
        bm_category: ['1', '4'],
        behavior_type: '1',
        entity_type: '0',
        industry_type: '7',
        veto_status: '0'
      },
      formObj: {
        formLabels: [
          {
            label: '事件名称',
            field: 'metricsName',
            type: 'input',
            span: 12,
            attrs: {
              placeholder: '请输入事件名称'
            }
          },
          /*  {
            label: '事件编码',
            field: 'metricsCode',
            type: 'input',
            disabled:false,
            // showPrefix:true,
            span: 12
          }, */
          // {
          //   label: '事件简称',
          //   field: 'malName',
          //   type: 'input',
          //   span: 12,
          //   attrs: {
          //     placeholder: '请输入事件简称'
          //   }
          // },
          {
            label: '指标来源',
            field: 'metrics_source',
            type: 'select',
            list: 'metrics_source_list',
            span: 12
          },
          // {
          //   label: '是否展示',
          //   field: 'isDisplay',
          //   type: 'radio',
          //   list: 'isDisplayList',
          //   span: 24
          // },
          {
            label: '事件级别',
            field: 'event_level',
            type: 'select',
            list: 'event_level_list',
            span: 12
          },
          {
            label: '事件分类',
            field: 'event_category',
            type: 'select',
            list: 'event_category_list',
            span: 12
          },
          {
            label: '风险分类',
            field: 'risk_type',
            type: 'select',
            list: 'risk_type_list',
            span: 12
          },
          {
            label: '事件类型',
            field: 'event_type',
            type: 'cascader',
            list: 'event_type_list',
            attrs: {
              placeholder: '请选择事件类型'
            },
            props: { checkStrictly: false },
            span: 12
          },
          {
            label: '分保技术要求',
            field: 'bm_category',
            type: 'cascader',
            list: 'bm_category_list',
            attrs: {
              placeholder: '请选择分保技术要求'
            },
            span: 12
          },
          // {
          //   label: '分保技术要求小类',
          //   field: 'protect_sub_category',
          //   type: 'select',
          //   list: 'protect_sub_category_list',
          //   span: 12
          // },
          {
            label: '行为类别',
            field: 'behavior_type',
            type: 'select',
            list: 'behavior_type_list',
            span: 12
          },
          {
            label: '监管对象',
            field: 'entity_type',
            type: 'select',
            list: 'entity_type_list',
            span: 12
          },
          {
            label: '行业属性',
            field: 'industry_type',
            type: 'select',
            list: 'industry_type_list',
            span: 12
          },
          {
            label: '一票否决项',
            field: 'veto_status',
            type: 'select',
            list: 'veto_status_list',
            span: 12
          },
          {
            label: '建议处置时限',
            field: 'dispose_time_range',
            type: 'select',
            list: 'dispose_time_range_list',
            span: 12
          }
        ],
        dictList: {
          isDisplayList: [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ],
          event_level_list: [],
          event_category_list: [],
          _list: [],
          risk_type_list: [],
          event_type_list: [],
          bm_category_list: [],
          protect_sub_category_list: [],
          behavior_type_list: [],
          entity_type_list: [],
          industry_type_list: [],
          veto_status_list: [],
          dispose_time_range_list: []
        },
        formRules: {
          metricsName: [{ required: true, message: '请输入事件名称', trigger: 'blur' }],
          metricsCode: [
            { required: true, message: '请输入事件编码', trigger: 'blur' },
            { validator: this.checkNormalCode, trigger: 'blur' }
          ],
          event_level: [{ required: true, message: '请选择事件级别', trigger: 'blur' }],
          event_category: [{ required: true, message: '请选择事件分类', trigger: 'blur' }],
          risk_type: [{ required: true, message: '请选择风险分类', trigger: 'blur' }],
          event_type: [{ required: true, message: '请选择事件类型', trigger: 'blur' }],
          bm_category: [{ required: true, message: '请选择分保技术要求', trigger: 'blur' }],
          protect_sub_category: [{ required: true, message: '请选择分保技术要求小类', trigger: 'blur' }],
          behavior_type: [{ required: true, message: '请选择行为类别', trigger: 'blur' }],
          entity_type: [{ required: true, message: '请选择监管对象', trigger: 'blur' }],
          industry_type: [{ required: true, message: '请选择行业属性', trigger: 'blur' }],
          veto_status: [{ required: true, message: '请选择一票否决项', trigger: 'blur' }]
        },
        submitData: {}
      },
      protect_sub_category_allLists: {}
    }
  },
  computed: {},
  mounted() {
    this.getSelectList()
  },
  methods: {
    show() {
      // this.getSelectList()
      this.open = true
    },
    /** 校验 */
    checkNormalCode(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入标识符'))
      }
      const reg = /^([0-9\-])*$/
      if (!reg.test(value)) {
        callback(new Error('输入内容只能是数字与-！'))
      } else {
        callback()
      }
    },
    /** 提交 */
    handleSubmit() {
      this.$refs.hkFormRef.handleFormSubmit('formLabels').then((res) => {
        console.log(res)
        const keys = Object.keys(res)
        const tags = []
        keys.forEach((i) => {
          if (
            i !== 'metricsName' &&
            i !== 'metricsCode' &&
            i !== 'malName' &&
            i !== 'isDisplay'
          ) {
            const normalCode = res[i] instanceof Array ? res[i] : [res[i]]
            tags.push({
              groupCode: i,
              dictId: this.getIdByCode(this.formObj.dictList[i + '_list'], _.cloneDeep(res[i])),
              dictValue: [...normalCode].join(',')
            })
          }
        })
        this.submitData = {
          metricsName: res.metricsName,
          metricsCode: res.metricsCode,
          malName: res?.malName || '',
          baseOn: res?.baseOn || '',
          isDisplay: res?.isDisplay || undefined,
          metricsDictRefs: tags
        }
        if (!this.isEdit) {
          addMetricsBase(this.submitData).then((res) => {
            this.$message.success('保存成功')
            this.resetForm()
            this.$emit('handleSubmit')
          })
        } else {
          editMetricsBase(this.submitData).then((res) => {
            this.$message.success('保存成功')
            this.resetForm()
            this.$emit('handleSubmit')
          })
        }
      })
    },
    getIdByCode(list, codes) {
      let code = codes
      if (codes instanceof Array) {
        code = codes.shift()
      }
      const item = list.find(o => o.value === code)
      if (item.children && item.children.length > 0 && codes.length > 0) {
        return this.getIdByCode(item.children, codes)
      }
      return item.id
    },
    /** 取消 */
    resetForm() {
      this.$refs.hkFormRef.resetForm('formLabels')
      this.open = false
    },
    /** 获取下拉列表数据*/
    getSelectList() {
      getMetrics().then((res) => {
        const result = res
        result.forEach((item) => {
          this.formObj.dictList[item.dictValue + '_list'] = this.handleRestructure(item)
        })
      })
    },
    /** 重构数据类型 */
    handleRestructure(data) {
      if (data?.children.length > 0) {
        return data.children.map((i) => {
          return { label: i.dictKey, value: i.dictValue, id: i.id, children: this.handleRestructure(i) }
        })
      }
    },
    /** 级联选的值*/
    handleEvent(obj, subValue) {

    }
  }
}
</script>
<style lang="scss" scoped>
.tips {
  margin-left: 10px;
  border-left: 4px solid #1890ff;
}
</style>
